<template>
	  <view class="container">
		    <msg></msg>
		  <!-- 顶部导航栏 -->
		  <view class="nav">
		  	<view class="menu">
				<view v-for="(item, index) in navList" :key="index" :class="curNavIndex==index?'bottom':''" @click="nav(index)">{{item}}</view>
		  	</view>
			<view class="search" @click="search">
				<image src="/static/index-search.png"></image>
			</view>
		  </view>
		  <view>
			  <view class="content" v-if="curNavIndex==0">
			  			  	<image src="/static/index-bg2.png" class="main-bg"></image>
			  		<image src="/static/index-bg1.png" class="logo-image"></image>
			  				<image src="/static/logoTitle.png" class="logo-title"></image>
			  				<view class="main">
			  					<view class="coupon">
			  						<view class="coupon1" v-for="(item, index) in couponsList" :key="index" @click="coupon(item.id)">
			  							<image src="/static/coupon.png"></image>
			  							<view class="coupon-wp">
			  								<view class="coupon-price"><text>{{item.sub_price}}</text> <image src="/static/index-money.png"></image></view>
			  								<text class="coupon-detail">{{item.rule}}</text>
			  							</view>
			  						</view>
			  					</view>
			  					<view class="main-one">
			  						<image src="/static/index-Title1.png" class="main-one-title1"></image>
			  						<view v-for="(item,index) in productsListMore" class="product" @click="goBuy(item.id)" :key="index">
			  							
			  							<image v-if="index%2==0" src="/static/product1.png" style="width: 100%;height: 100%;"></image>
			  						<image v-else src="/static/product2.png" style="width: 100%;height: 100%;"></image>
			  							<view class="pro-wp" v-if="index%2==0">
			  								<image :src="item.activity_url" class="product-img"></image>
			  								<view class="pro-price">
			  									<text class="product-detail">{{item.description}}</text>
			  									<text class="product-price">{{item.price}}</text>
			  								</view>
			  							</view>
			  							
			  							<view class="pro-wp p150" v-else>
			  								
			  								<view class="pro-price">
			  									<text class="product-detail">{{item.description}}</text>
			  									<text class="product-price">{{item.price}}</text>
			  								</view>
			  								<image :src="item.activity_url" class="product-img"></image>
			  							</view>
			  							
			  						</view>
			  					</view>	
			  					<view class="main-two">
			  						<image src="/static/index-Title2.png" class="main-one-title2"></image>
			  						<view class="main-two-ul">
										<view class="main-two-li" v-for="(item, index) in productsList" :key="index"  @click="goBuy(item.id)">
											<view class="main-two-img">
												<image :src="item.activity_url" mode="aspectFit"></image>
											</view>
											<view class="main-two-tottom">
												<text class="main-two-title">{{item.name}}</text>
												<view class="mian-two-bottom2">
													￥<text class="main-twoPrice">{{item.price}}</text>
													<image src="/static/index-btn.png" @click="buy(item.id)"></image>
												</view>
											</view>
										</view>
			  						</view>
			  					</view>
			  				</view>
			  	</view>
			  </view>
			  <view class="" v-if="curNavIndex==1">
			  	<view class="navbar">
					<view class="nav-item" v-for="(item, index) in proTypeList" :key="index" :class="curPtIndex==index?'bottom':''" @click="pTypeChose(index)">
						<text>{{item}}</text>
						<view class="p-box" v-if="index==3">
							<text :class="{active: priceSort === 0}" class="yticon icon-shang"></text>
							<text :class="{active: priceSort === 0}" class="yticon icon-shang xia"></text>
						</view>
					</view>
				</view>
				<view class="main-two-ul">
					<view class="main-two-li" v-for="(item, index) in goodsList" :key="index"  @click="goBuy(item.id)">
						<view class="main-two-img">
							<image :src="item.cover_pic" mode="aspectFit"></image>
						</view>
						<view class="main-two-tottom">
							<text class="main-two-title">{{item.name}}</text>
							<view class="mian-two-bottom2">
								￥<text class="main-twoPrice">{{item.price}}</text>
								<image src="/static/index-btn.png" @click="buy(item.id)"></image>
							</view>
						</view>
					</view>
				</view>
			  </view>
			  <view class="active-cont" v-if="curNavIndex==2">
			  	<view class="guess" v-for="active in activeList">
			  		<view class="guess-title">
			  			<text class="squareS"></text>
			  			<text class="squareM"></text>
			  			<h3>{{active.activeName}}</h3>
			  			<text class="squareM"></text>
			  			<text class="squareS"></text>
			  		</view>
			  		<ul class="guess-list">
			  			<li v-for="(item,index) in active.list" :key="index" data-atem="index" @click="goBuy(item.id)">
			  				<view>
			  					<view class="seck-p"><image :src="item.cover_pic"></image></view>
			  					<view class="guess-count">
			  						<text>{{item.name}}</text>
			  						<text class="new-price">￥{{item.price}}</text>
			  						<text class="old-price">￥{{item.original_price}}</text>
			  					</view>
			  				</view>
			  			</li>
			  		</ul>
			  	</view>
			  </view>
			  <view class="active-cont" v-if="curNavIndex==3">
			  	<view v-for="(item, index) in newImgList">
			  		<image :src="item.url"
			  			:class="[item.loaded]"
			  			mode="aspectFill" 
			  			lazy-load 
			  			@load="onImageLoad('imgList', index)" 
			  			@error="onImageError('imgList', index)"
			  		></image>
			  	</view>
			  </view>
		  </view>
		  
	  </view>
</template>
<script>
 import msg from '@/components/msg.vue'
 import url from '../../components/hosturl.js';
export default {
	components:{
		msg
	},
		data() {
			return {
				navList:['精选','商品','活动','上新'],
				proTypeList:['推荐','销量','新品','价格'],
				activeList:[{activeName:'秒杀',list: null},{activeName:'买一送一',list: null},{activeName:'满减',list: null}],
				goodsList:[], // 商品列表
				curNavIndex: 0,
				curPtIndex: 0,
				// 优惠卷列表信息
				couponsList:[],
				//爆款推荐信息
				productsList:[],
				// 炎炎夏日推荐
				productsListMore:[],
				newImgList: [],
				priceSort:0,
			}
		},
		onLoad() {
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					uni.setStorageSync('code',loginRes.code);
				}
			});
			this.nav(0); // 首页初始化数据
		},
		methods: {
			//去抢购按钮
			goBuy(id){
				uni.navigateTo({
					url:'/pages/classify/product?id='+id
				})
			},
			//顶部tab切换
			nav(i){
				this.curNavIndex = i;
				switch(i){
					case 0: // 精选
						this.getCoupon();
						this.getIndexActive();
					break;
					case 1: // 商品
						this.pTypeChose(0);
					break;
					case 2: // 活动
						this.getActiveList();
						this.getBsList();
						this.getMjList();
					break;
					case 3: // 上新
						this.getNewImgList();
					break;
				}
			},
			// 商品过滤
			pTypeChose(i){
				this.curPtIndex = i;
				let type = '';
				switch(i){
					case 0: // 推荐
						type = 'T';
					break;
					case 1: // 销量
						type = 'X';
					break;
					case 2: // 新品
						type = 'P';
					break;
					case 3: // 价格
						type = 'J';
						this.priceSort = this.priceSort==0?1:0;
					break;
				}
				this.getProductTab(type);
			},
			// 获取优惠券
			getCoupon(){
				uni.request({
					url:url+'/Main/getCoupons',
					data:{},
					success:res=> {
						this.couponsList = res.data.message;
					}
				});
			},
			// 获取首页活动展示
			getIndexActive(){
				uni.request({
					url:url+'/Main/getMerchandise',
					success:res=>{
						this.productsList=res.data.message;
						this.productsListMore=res.data.message;
					}
				})
			},
			// 获取商品数据
			getProductTab(type){
				uni.request({
					url:url+'/Classify/getMerchandise',
					data:{
						condition: type,
						pageNum: 1,
						pageSize: 10,
						type: this.priceSort
					},
					success:res=>{
						this.goodsList=res.data['T'].list;
					}
				})
			},
			// 获取活动页面秒杀商品数据
			getActiveList(){
				uni.request({
					url:url+'/Main/getSeckill',
					success:res=>{
						this.activeList[0].list = res.data.message;
					}
				})
			},
			// 获取活动页面买一送一商品数据
			getBsList(){
				uni.request({
					url:url+'/Main/getByOne',
					success:res=>{
						this.activeList[1].list = res.data.message;
					}
				})
			},
			// 获取活动页面满减商品数据
			getMjList(){
				uni.request({
					url:url+'/Main/getReduction',
					success:res=>{
						this.activeList[2].list = res.data.message;
					}
				})
			},
			// 跳转查询页面
			search(){
				uni.navigateTo({
					url: '/pages/index/search'
				});
			},
			// 领取优惠券
			coupon(id){
				var token=uni.getStorageSync('token');
				uni.request({
					url:url+'/Main/getAccessCoupon',
					method:'POST',
					data:{
						token,
						id:Number(id)
					},
					header: {
							"Content-Type": "application/x-www-form-urlencoded"
					},
					success:res=>{
						uni.showToast({
							title:res.data.msg,
							duration:400
						})
					}
				})
				
			},
			buy(id){
				uni.navigateTo({
					url:'/pages/classify/product?id='+id
				})
			},
			// 上新获取品牌故事
			getNewImgList(){
				uni.request({
					url:url+'/Story/getStory',
					success:res=>{
						console.log(res);
						this.newImgList=res.data.message;
					}
				})
			},
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/errorImage.jpg';
			},
		}
	}
</script>
<style lang="scss">
page{margin: 0;padding: 0;background:#f9ebeb;margin-top: 79rpx;}
.content{position:relative;text-align: center;}
.nav{ align-items: center;background: #b492eb;display: flex;height: 80rpx;width: 100%;position: fixed;top: -1rpx;z-index: 100;}
.menu{display: flex;justify-content: space-around; width: 61.3%;}
.menu view{ display:inline-block ;color: #fefefe;font-family: 'Bitstream Vera Serif Bold';font-size: 30rpx;line-height: 50rpx; }
.bottom{position: relative;}
.bottom:after{content: " ";width: 40rpx;height: 4rpx;background: #ffffff;position: absolute;bottom: -0.1rem;left: 50%;transform: translateX(-50%);}
.navbar .bottom:after{background: #b492eb;}
.search{background: #cfbff4;border-radius: 20rpx;height: 40rpx;margin-left: 80rpx; padding-left:35rpx ;width: 190rpx;display: flex;align-items: center;}
.search image{height: 26rpx;width: 26rpx;}
.logo-image{height: 630rpx;width: 100%;z-index: 99;position: absolute;top:0;left: 0;}
 .logo-title{height: 40rpx;left: 215rpx;position: absolute;top: 580rpx; width: 330rpx;z-index: 1000;display: block;}
.main-bg{height: 2610rpx; width: 100%;position:absolute;top: 0;left: 0;z-index: -10;}
.main{padding: 0 25rpx;position:relative;top:330px;left:0;}
.coupon{display: flex;justify-content: flex-start;width: 700rpx; }
.coupon image{height: 100rpx;width: 225rpx;display: inline-block;z-index: 2000;}
.coupon1 { position:relative; }
.coupon-wp { display: flex;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1000; }
.coupon-price { color: #fff;overflow: hidden;width:160rpx;text-align:center;position: relative; } 
.coupon-price text{font-size: 30rpx;position: absolute;top: 36rpx;left: 35rpx;}
.coupon-price image { width:24rpx;height:24rpx;position:absolute;top:14rpx;right:0rpx; }
.coupon-detail { font-size: 12.55rpx;color: #f8f6fd;overflow: hidden;padding:20rpx 20rpx 0 0; }

.main-one{width: 100%;position:relative;padding-top:124rpx;}
.main-one-title1{height: 124rpx;left:48rpx;position: absolute;width: 630rpx;top:0;}
.product {height: 340rpx;width: 690rpx;position:relative;margin-top:30rpx; }
.pro-wp { position:absolute;width:100%;height:100%;left:0;top:0;display: flex; }
.product-img{width: 230rpx;height: 240rpx;margin:56rpx 0 0 88rpx;}
.pro-price { display: flex;padding:190rpx 0 0 50rpx;flex-direction: column; }  
.product-detail { color: #000;font-size: 17.7rpx;font-weight: 400;width: 210rpx;margin-left:-10rpx; }
.product-price {color: #fff;font-size: 32.74rpx;margin-top:10rpx; }
.p150 { padding-left:102rpx; }
.p150 .product-img { margin-left:20rpx; }
.main-one-title2{height: 120rpx;width: 510rpx;margin:50rpx auto 0;display: block;}
.main-two-ul{display: flex;flex-wrap: wrap;justify-content:space-between ;padding:0 30rpx;margin-top:150rpx;}
.main-two-li{display: inline-block;height: 380rpx;margin-top: 30rpx;width: 310rpx;background: #fffafa;border-radius: 20rpx;overflow: hidden;margin-right:20rpx;}
.main-two-ul .main-two-li:nth-child(2n+2) { margin-right:0; }
.main-two-img{width: 100%;height: 260rpx;display: flex;justify-content: center;align-items: center;}
.main-two-img image{width: 70%;height: 70%;}
.main-two-tottom{background: #fff;width: 310rpx;height: 120rpx;padding: 20rpx 30rpx;display: flex;flex-direction: column;justify-content: space-between;padding-top:10rpx ;}
.main-two-title {display: block;font-size: 24rpx;color: #666;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.mian-two-bottom2 {font-size: 18.65rpx;color: #a387eb;}
.mian-two-bottom2 text {font-size: 44.6rpx;margin-right: 10rpx;}
.mian-two-bottom2 image {width: 105rpx;height: 45rpx;}
.navbar{position: fixed;left: 0;top: 79rpx;display: flex;width: 100%;height: 80rpx;background: #fff;box-shadow: 0 2rpx 10rpx rgba(0,0,0,.06);z-index: 10;
	.nav-item{flex: 1;display: flex;justify-content: center;align-items: center;height: 100%;font-size: 30rpx;color: $font-color-dark;position: relative;
		&.current{color: #3640a1;
		&:after{content: '';position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 60rpx;height: 0;border-bottom: 4rpx solid #3640a1;
}}}
.p-box{display: flex;flex-direction: column;.yticon{display: flex;align-items: center;justify-content: center;width: 30rpx;height: 14rpx;line-height: 1;margin-left: 4rpx;font-size: 26rpx;color: #888;&.active{color: #b492eb;}}.xia{transform: scaleY(-1);}}}
/*  商品列表 */ 
.goods-list{ background: #ddd;display:flex;flex-direction: column;margin-top: 70rpx;}
.goods-item{ background: #fff;display:flex;margin-top: 20rpx;padding:30rpx;width: 100%; }
/* 商品图片 */ 
.image-item-left{ height: 200rpx;margin-right: 20rpx;width: 200rpx; }
.image-item-left image{ height: 200rpx;width: 200rpx;opacity: 1;}
.image-item-right{ display: flex; flex: 2;flex-direction: column; height: 200rpx;justify-content: space-between;overflow: hidden;}
/* 商品名 */ 
.title{ color: #333; font-size: 30rpx;margin-top: 10rpx;}
/* 单价 */ 
.price{font-size: 28rpx;margin-right: 20rpx;}
/* 销量 */
.sales{color: #8b8b8b;font-size: 28rpx;}
/* 购物车图标 */ 
.image-item-right image{height: 40rpx;float: right;overflow: hidden;width: 40rpx;}
.guess-title { align-items: center; display: flex; justify-content: center; }
	.guess-title .squareS { background: #dedede; display: block; height: 12rpx; width: 12rpx; transform: rotate(45deg); }
	.guess-title .squareM { background: #dedede; height: 18rpx; width: 18rpx; transform: rotate(45deg); margin: 0 20rpx; }
	.guess-title h3 { color: #040404; font-size: 30rpx; text-align: center; line-height: 90rpx; }
	.guess-list { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; width: 93.3%; }
	.guess-list li { height: 545rpx; width: 49.1%; background: #fff; border-radius: 8rpx; margin-bottom: 16rpx; }
	.guess-count { height: 135rpx;display: flex;flex-direction: column;font-weight: bold;justify-content: space-around;margin: 0 auto;width: 86.6%;}
	.guess-count text:nth-of-type(1) { color: #2b2b2b;font-size: 26rpx;}
	.guess-count text:nth-of-type(2) { color: #ff3e4d;font-size: 28rpx;}
	.guess-list image { border-top-left-radius: 8rpx;border-top-right-radius: 8rpx;height: 410rpx; margin: 0 auto; width: 100%; }
</style>